import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { TouchableOpacity, View, Image, Text } from 'react-native'
import Swiper from 'react-native-swiper'
import styles from './Styles/BannerStyle'

export default class Banner extends Component {
  // Prop type warnings
  static propTypes = {
    height: PropTypes.number,
    data: PropTypes.array,
    navigation: PropTypes.object,
  }

  // Defaults for props
  static defaultProps = {
    height: 220,
    data: null
  }

  render () {
    if (!this.props.data) {
      return null
    }
    const { navigate } = this.props.navigation
    return (
      <Swiper
        paginationStyle={{marginBottom:-20}}
        autoplay={true}
        autoTimeout={3}
        activeDotColor='#fdcb6e'
        height={this.props.height}>
        {this.props.data.map((item, i) =>
          <TouchableOpacity
            onPress={()=>{ if (item.link_url != '#') navigate('WebScreen',{title:item.title,link:item.link_url})}}
            style={styles.slide} key={i}>
            <Image style={{width:'100%',height:'100%'}}
              source={{uri:item.images}} />
          </TouchableOpacity>
        )}
      </Swiper>
    )
  }
}
